﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载WMTS服务地图</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <!--  引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
        }
        #map{
            width:100%;
            height:570px;
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 0px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;    
        }
        #menu ul{
            float:left;
        }
        #menu ul li{
            float:left;
            list-style:none;
            margin:0px 15px; 
        }
    </style>
</head>
<body>
     <div id="menu">
        <ul>
            <li >
                <label class="checkbox" ><input type="checkbox" name="maps" value="wmts"/>arcgisonline WMTS</label>
            </li>
        </ul>
    </div> 
    <div id="map" > 
    </div>
    <script type="text/javascript">
        var wmtsLayer; //WMTS图层数据

        //通过范围计算得到分辨率数组
        var projection = ol.proj.get('EPSG:3857');
        var projectionExtent = projection.getExtent();
        var size = ol.extent.getWidth(projectionExtent) / 256;
        var resolutions = new Array(14);
        var matrixIds = new Array(14);
        for (var z = 0; z < 14; ++z) {
            // generate resolutions and matrixIds arrays for this WMTS
            resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = z;
        }
        //数据源信息
        var attribution = new ol.Attribution({
            html: 'Tiles &copy; <a href="http://services.arcgisonline.com/arcgis/rest/' +
              'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
        });
        //实例化WMTS服务图层对象（ol.layer.Tile，ol.source.WMTS）
        wmtsLayer = new ol.layer.Tile({
            opacity: 0.7, //图层透明度
            source: new ol.source.WMTS({
                attributions: [attribution], // 数据源信息
                url: 'http://services.arcgisonline.com/arcgis/rest/' +
                            'services/Demographics/USA_Population_Density/MapServer/WMTS/', //WMTS服务基地址
                matrixSet: 'EPSG:3857', //投影坐标系设置矩阵
                format: 'image/png', //图片格式
                projection: projection, //数据的投影坐标系
                //瓦片网格对象
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent), //原点（左上角）
                    resolutions: resolutions, //分辨率数组
                    matrixIds: matrixIds  //矩阵标识列表，与地图级数保持一致
                }),
                style: 'default',
                wrapX: true
            })
        });


        //实例化Map对象加载地图,默认底图加载OSM地图
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'map',//地图容器div的ID
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */({
                    collapsible: false
                })
            }),
            view: new ol.View({
                center: [-11158582, 6513697],
                minZoom: 2,
                zoom: 3
            })
        });

       //通过复选框控制加载与移除WMTS服务图层数据
       $("input[name='maps']")[0].onclick = function () {
           if ($("input[name='maps']")[0].checked) {
                map.addLayer(wmtsLayer); //加载WMTS服务图层数据
            }
            else {
                map.removeLayer(wmtsLayer); //移除WMTS服务图层数据
            }
        };
    </script>
</body>
</html>
